@import '../style/fn.less';

.page {
  background-color: #ededed;
  overflow-x: hidden;
  min-height: 100%;
}

.page__hd {
  background-color: #ededed !important;
}

.cells {
  margin-top: 8px;
  margin-left: 12px;
  margin-right: 12px;
  position: relative;
  background-color: #ffffff;
  border-radius: 8px;

  &:before {
    z-index: 2;
  }

  &:after {
    z-index: 2;
  }
}

.cell {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  display: flex;
  align-items: center;

  &:before {
    .setTopLine();
    margin-top: -1px;
    margin-left: 20px;
    margin-right: 20px;
  }

  &:first-child {
    &:before {
      display: none;
    }
  }

  &:active {
    background-color: @weuiBgColorActive;
  }

  .cell-brief {
    // color: #888;
    color: @weuiTextColorDesc;
    font-size: 15px;
    line-height: 1.5;
    margin-top: 6px;
  }
}

.cell__hd {
  img {
    width: 60px;
    margin-right: 8px;
  }
}

.cell__bd {
  flex: 1;
}

.cell__ft {
  text-align: right;
  color: @weuiTextColorDesc;
  position: relative;
  svg {
    vertical-align: middle;
  }
}

.cell_access {
  .cell__ft {
    padding-right: 22px;

    &:after {
      content: ' ';
      width: 12px;
      height: 24px;
      mask-position: 0 0;
      mask-repeat: no-repeat;
      mask-size: 100%;
      background-color: currentColor;
      color: @weuiTextColorTips;
      mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
      position: absolute;
      top: 50%;
      right: 0;
      margin-top: -12px;
    }
  }
}
